<template>
  <div class="container mx-auto">

      <NavWap  class="xl:hidden" @showBigSlideMenu="showBigSlideMenu"  />
      <NavPc  class="hidden xl:block" @showBigSlideMenu="showBigSlideMenu"  />
      
             <!-- pc端才会出现左侧小菜单 -->
      <SlideMenuSmall class="hidden md:block"  v-if="slideTpye == 'small'"  />
       <!-- pc web端 拉出左侧菜单 -->
       <SlideMenuBig  v-if="slideTpye == 'big'" @showBigSlideMenu="showBigSlideMenu"/>
 
  <div :class="pl" class="  pt-16  min-h-screen w-full"  >
     
  <!--
  This example requires Tailwind CSS v2.0+ 
  
  This example requires some changes to your config:
  
  ```
  // tailwind.config.js
  module.exports = {
    // ...
    plugins: [
      // ...
      require('@tailwindcss/forms'),
    ],
  }
  ```
-->
<div class="p-3">
  <div>
  

    <main class=" w-full">
     

      <section aria-labelledby="products-heading" class="pt-6 pb-24">
        <h2 id="products-heading" class="sr-only">Community</h2>

        <div class="grid grid-cols-1 lg:grid-cols-4 gap-x-8 gap-y-10 ">
          <!-- Filters -->
           <Userleft   />

          <!-- topics grid -->
          <div class="lg:col-span-3">
            <div class="menu-box mb-4">
              <ul class="w-full menu items-stretch px-3 shadow-lg  horizontal rounded-box bg-gray-800 text-gray-300">
                <li>
                  <a>
                      Recent  
                      </a>
                </li> 
                
                <li>
                  <span>
                        Most Liked
                      </span>
                </li> 
                <li class="bordered">
                  <a>
                    
                    <svg t="1641203093632" class="inline-block w-6 h-6 mr-2 stroke-current" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18574" width="200" height="200"><path d="M519.110443 637.45734 339.641979 637.45734c-6.338359 0-11.477402-5.13802-11.477402-11.477402 0-6.337335 5.13802-11.478426 11.477402-11.478426l179.469488 0c6.337335 0 11.478426 5.13802 11.478426 11.478426C530.588869 632.318296 525.448802 637.45734 519.110443 637.45734z" p-id="18575" fill="#dbdbdb"></path><path d="M670.981363 514.022053 339.641979 514.022053c-6.338359 0-11.477402-5.13802-11.477402-11.477402 0-6.338359 5.13802-11.477402 11.477402-11.477402l331.339384 0c6.338359 0 11.478426 5.13802 11.478426 11.477402C682.458765 508.885056 677.319721 514.022053 670.981363 514.022053z" p-id="18576" fill="#dbdbdb"></path><path d="M574.334185 390.586766 339.641979 390.586766c-6.338359 0-11.477402-5.13802-11.477402-11.477402 0-6.339382 5.13802-11.477402 11.477402-11.477402l234.69323 0c6.337335 0 11.477402 5.13802 11.477402 11.477402C585.810564 385.448746 580.672544 390.586766 574.334185 390.586766z" p-id="18577" fill="#dbdbdb"></path><path d="M919.060461 889.522216c-1.12973 0-2.270716-0.165776-3.38612-0.51063-0.62524-0.192382-63.340607-19.500123-123.917264-33.3035-6.179746-1.407046-10.048867-7.560186-8.639774-13.739932 1.407046-6.181793 7.563256-10.05296 13.740956-8.640798 37.45403 8.534374 75.674517 19.131733 99.956549 26.151613-7.981788-16.190751-18.782785-38.864146-28.837792-62.45954-35.845393-84.127026-32.279171-108.028389-25.168216-119.453602 33.617655-54.018288 51.387367-114.538663 51.387367-175.018106 0-190.297091-174.452217-345.115132-388.885008-345.115132-214.43893 0-388.897288 154.818041-388.897288 345.115132 0 194.506972 178.093141 358.831528 388.897288 358.831528 60.238966 0 118.250194-12.94073 172.424025-38.45994 5.732561-2.704598 12.573363-0.24457 15.274892 5.490038 2.701528 5.734608 0.2415 12.57234-5.492084 15.273868-57.255005 26.974351-118.557186 40.651862-182.205808 40.651862-55.288211 0-109.167329-10.429537-160.13821-31.000038-48.794309-19.690458-92.807732-47.75463-130.820488-83.408665-37.766139-35.422767-67.499323-76.343759-88.375793-121.627105-21.577434-46.806026-32.516578-95.842859-32.516578-145.750525 0-49.856501 10.958586-98.213859 32.573883-143.726425 20.827351-43.856857 50.615794-83.219353 88.537476-116.994598 77.726246-69.224618 180.978864-107.348913 290.740734-107.348913 109.75573 0 213.006302 38.124296 290.730501 107.348913 37.921681 33.775244 67.708078 73.138764 88.537476 116.994598 21.61325 45.51359 32.57286 93.869924 32.57286 143.726425 0 64.771189-18.968004 129.486096-54.853305 187.148377-0.916882 1.471514-7.952112 16.736173 26.748201 98.206696 18.646686 43.779086 39.96113 84.396155 40.173978 84.800361 2.159176 4.105504 1.636267 9.106402-1.327228 12.676717C925.673066 888.047632 922.415882 889.522216 919.060461 889.522216z" p-id="18578" fill="#dbdbdb"></path></svg>
                        Most Answers
                  </a>
                </li>
                
              </ul>
            </div>
            <!-- Replace with your content -->
               <div class="bg-gray-800 text-gray-300 rounded-box">        
                <div class="card "><div class="flex-row items-center space-x-4 card-body  p-4"><div><div class="avatar"><div class="rounded-full w-10 h-10 shadow"><img src="https://i.pravatar.cc/500?img=32"></div></div></div> <div><h2 >Janis Johnson</h2> <p class=" text-gray-400">2 weeks ago</p></div></div></div>
                  <div class="card lg:card-side   ">
                
                  <div class="card-body  p-4 pt-0">
                      <h2 class="card-title text-gray-100 p-0 m-0"> Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente
                      <div class="badge mx-2 bg-red-500">Hot</div>
                       <div class="badge mx-2 bg-green-400">New</div>
                       <div class="badge mx-2 bg-blue-500">Top</div>
                      </h2> 
                    
                      <p  class="pt-2">Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.</p> 
                      <div class="truncate mt-4">
                      <a class="btn btn-outline btn-xs text-gray-400 mr-2">neutral</a> 
                      <a class="btn btn-outline btn-xs text-gray-400 mr-2">neutral</a> 
                      <a class="btn btn-outline btn-xs text-gray-400 mr-2">neutral</a>
                      <a class="btn btn-outline btn-xs text-gray-400 mr-2">neutral</a>  
                      </div>
                        <div class="mt-4"> 
                          <div class="float-left"> 
                            <svg t="1641201903374" class="h-6 w-6 inline-block" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18376" width="200" height="200"><path d="M850.879104 96.41591l-676.303067 0c-60.681034 0-110.049418 49.367361-110.049418 110.049418l0 446.200388c0 60.681034 49.367361 110.049418 110.049418 110.049418l90.307795 0L396.936381 931.129846c3.793396 4.838192 9.598612 7.66354 15.746636 7.66354s11.952216-2.825348 15.746636-7.66354l132.052548-168.414711 290.396903 0c60.681034 0 110.049418-49.367361 110.049418-110.049418L960.928522 206.465329C960.928522 145.784294 911.561162 96.41591 850.879104 96.41591zM920.91111 652.665717c0 38.614459-31.416524 70.030983-70.030983 70.030983L550.744419 722.6967c-6.147 0-11.952216 2.825348-15.745612 7.66354L412.683017 886.356107l-122.31579-155.995867c-3.792373-4.838192-9.597589-7.66354-15.745612-7.66354l-100.045577 0c-38.614459 0-70.030983-31.416524-70.030983-70.030983L104.545054 206.465329c0-38.614459 31.416524-70.030983 70.030983-70.030983l676.303067 0c38.614459 0 70.030983 31.416524 70.030983 70.030983L920.910087 652.665717z" p-id="18377" fill="#dbdbdb"></path><path d="M272.621051 344.526731c-44.132126 0-80.035848 35.903721-80.035848 80.035848 0 44.132126 35.903721 80.036871 80.035848 80.036871s80.035848-35.904745 80.035848-80.036871C352.655875 380.430452 316.752154 344.526731 272.621051 344.526731zM272.621051 464.582037c-22.065552 0-40.017412-17.951861-40.017412-40.018436 0-22.065552 17.952884-40.017412 40.017412-40.017412 22.065552 0 40.017412 17.951861 40.017412 40.017412C312.638463 446.629153 294.686602 464.582037 272.621051 464.582037z" p-id="18378" fill="#dbdbdb"></path><path d="M512.727571 344.526731c-44.132126 0-80.035848 35.903721-80.035848 80.035848 0 44.132126 35.903721 80.036871 80.035848 80.036871 44.132126 0 80.035848-35.904745 80.035848-80.036871C592.763418 380.430452 556.859697 344.526731 512.727571 344.526731zM512.727571 464.582037c-22.065552 0-40.017412-17.951861-40.017412-40.018436 0-22.065552 17.951861-40.017412 40.017412-40.017412 22.065552 0 40.017412 17.951861 40.017412 40.017412C552.746006 446.629153 534.793122 464.582037 512.727571 464.582037z" p-id="18379" fill="#dbdbdb"></path><path d="M752.836137 344.526731c-44.131103 0-80.035848 35.903721-80.035848 80.035848 0 44.132126 35.904745 80.036871 80.035848 80.036871s80.035848-35.904745 80.035848-80.036871C832.871985 380.430452 796.96724 344.526731 752.836137 344.526731zM752.836137 464.582037c-22.066575 0-40.017412-17.951861-40.017412-40.018436 0-22.065552 17.951861-40.017412 40.017412-40.017412s40.017412 17.951861 40.017412 40.017412C792.853549 446.629153 774.902712 464.582037 752.836137 464.582037z" p-id="18380" fill="#dbdbdb"></path></svg>
                            110 Posts
                          </div>
                          <div class="float-right">
                          <svg t="1641192519668" class="h-6 w-6 inline-block" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11421" width="200" height="200"><path d="M923.421 501.927c-31.19-83.254-86.289-154.373-159.107-205.71-74.638-52.55-162.384-80.464-254.013-80.464s-179.374 27.792-254.013 80.464c-72.94 51.458-127.917 122.576-159.107 205.71l-3.884 10.194 3.884 10.194c31.19 83.254 86.289 154.373 159.107 205.71 74.638 52.55 162.384 80.464 254.013 80.464s179.374-27.792 254.013-80.464c72.94-51.458 127.917-122.576 159.107-205.71l3.884-10.194-3.884-10.194z m-413.12 248.429c-155.102 0-296.126-95.269-354.623-238.114 58.375-142.965 199.521-238.114 354.623-238.114s296.126 95.269 354.623 238.114c-58.497 142.845-199.643 238.114-354.623 238.114z" p-id="11422" fill="#dbdbdb"></path><path d="M510.301 357.99c-84.955 0-154.131 69.177-154.131 154.131s69.177 154.131 154.131 154.131 154.131-69.177 154.131-154.131S595.255 357.99 510.301 357.99z m0 250.008c-52.914 0-95.877-42.962-95.877-95.877s42.962-95.877 95.877-95.877 95.877 42.962 95.877 95.877-43.084 95.877-95.877 95.877z" p-id="11423" fill="#dbdbdb"></path></svg>
                          <span class="inline-block">11k</span>
                          <svg t="1641192768302" class="h-4 w-4 inline-block ml-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12280" width="200" height="200"><path d="M511.913993 928.016126c-28.898371 0-57.968755-12.729044-86.695112-41.455401L106.30472 564.034268C68.117588 516.38636 31.994625 471.318663 31.994625 383.935495c0-141.223585 114.905426-255.956996 255.956996-255.956996 53.15236 0 104.068537 16.169326 147.244079 46.615824 14.449185 10.148833 17.889467 30.102469 7.740635 44.551655-10.148833 14.449185-30.102469 17.889467-44.551655 7.740635-32.338653-22.877877-70.525785-34.918864-110.433059-34.918864-105.960692 0-191.967747 86.179069-191.967747 191.967747 0 61.409037 20.297665 90.135394 59.172854 138.643373l315.645893 318.742147c15.997312 15.997312 28.898371 22.361834 41.283387 22.533848 12.729044 0.172014 24.942046-6.192508 41.455401-22.705863l316.677977-319.946246c25.974131-28.210314 57.968755-75.858223 57.968755-137.439274 0-105.960692-86.179069-191.967747-191.967747-191.967747-47.991937 0-94.091718 17.889467-129.526625 50.22812l-133.998992 134.171006c-12.55703 12.55703-32.682681 12.55703-45.239711 0s-12.55703-32.682681 0-45.239711l135.031077-135.203091c48.335965-44.207626 109.745003-67.945574 173.734252-67.945574 141.223585 0 255.956996 114.905426 255.956996 255.956996 0 82.394759-41.111372 144.319839-75.686209 181.646901L598.781119 886.388712C569.882748 915.287082 540.984378 928.016126 511.913993 928.016126z" p-id="12281" fill="#dbdbdb"></path></svg>
                          <span class="inline-block">11k</span>
                          </div>
                          <div class="clear-both"></div>

                      </div>
                  </div>
                  </div>
              </div> 
 
            <!-- /End replace -->
          </div>
          <!-- recommend topics grid -->
         
        </div>
      </section>
    </main>
  </div>
</div>

</div>
</div>
</template>


<script>
import Userleft from '../../components/Userleft.vue';

export default {
  components: { Userleft },
  layout({req}){
    // //console.log("req.layout:",req.layout)
     return "web";
  },
 
  name: 'IndexPage',
   data(){
    return { 
      slideTpye:'small',
      user:{},
      pl:"pl-0 md:pl-20",
    }
  },
   async asyncData({$axios,req,store}) {
      
      return {  }
   },
    async fetch({ store, params }) {
      // //console.log("store.state.user:",store)
      // await store.dispatch('GET_USER')
   },
   created(){
       //console.log("created:","123123")
   },
  methods: {
    // 左侧菜单显示
     showBigSlideMenu(){
        // //console.log("per:pl",this.pl,"slideTpye:",this.slideTpye)
        if(this.slideTpye=="small"){
          this.slideTpye="big";
          this.pl="pl-0 md:pl-60";
        }else{
          this.slideTpye="small";
          this.pl="pl-0 md:pl-20";
        }
     }
   }
   
 
     

}
</script>
